<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../js库/mock.js"></script>
    <script src="../../js库/vue.js"></script>
    <title>伪类选择器</title>
    <style>
        /* 
          伪类选择器 用于向某些选择器添加特殊效果 比如给链接添加特殊效果 或 选择第一个 第n个元素
            为了确保链接伪类生效 按照LVHA的顺序声明 
            a标签伪类选择器
            focus伪类选择器 用于获取得到焦点的元素(不是帮助元素获取焦点) 主要针对表单元素
          */
    </style>
</head>
<style>
    a:link {
        color: red;
        text-decoration: none;
    }

    a:visited {
        color:gray;
        text-decoration:line-through;
    }
    a:hover {
        font-size: 30px;
        
    }
 
 input:focus {
    background-color: green;
    font-size: 29px;
 } 
</style>

<body>
    <div id="root">
        <form >
          用户名:<input type="text" name="" ><br>
           密码 :<input type="text" name="" ><br>
            爱好:<input type="text" name="" ><br>
        </form>
        <h1>a标签伪类选择器</h1>
        <ol>
            <li v-for="li in links" :key="li.link"><a :href="li.link">{{li.name}}</a></li>

        </ol>
        <h2>li</h2>
     
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data() {
            return {
                links: [
                    { link: 'http://www.baidu.com', name: '百度' },
                    { link: 'http://www.qq.com', name: 'qq' },
                    { link: 'http://www.360.com', name: '360' },
                    { link: 'http://www.163.com', name: '网易' },
                    { link: 'http://www.iqiyi.com', name: '爱奇艺' },
                    { link: 'http://www.360.com', name: '360' },

                ]
            }
        },
    })
</script>

</html>